<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>23软件技术1班李金斗23007625待办事项列表</title>

</head>
<body>
    <div id="app">
        <h1>我的待办事项</h1>
        <form id="todo-form">
            <input type="text" id="todo-input" placeholder="添加新的待办事项...">
            <button type="submit">点击添加</button>
        </form>
        <ul id="todo-list">
       
        </ul>
    </div>
   
 <style>
    body {
        font-family: 'Arial', sans-serif;
        background: #f4f4f4;
        color: #333;
        line-height: 1.6;
        background-image: url(2.jpg);
    }
    
    #app {
        width: 300px;
        margin: 30px auto;
    }
    
    #todo-form input[type="text"] {
        width: 90%;
        padding: 20px;
    }
    
    #todo-form button {
        width: 25%;
        background: #229af5;
        color: white;
        padding: 10px;
        border: none;
    }
    
    #todo-list {
        list-style: none;
        padding: 0;
    }
    
    #todo-list li {
        background: #deaaaa;
        margin-bottom: 5px;
        padding: 10px;
        text-align: left;
    }
  

    </style>
    <script>
        alert("我的待办");
       
const todoForm = document.getElementById('todo-form');
const todoInput = document.getElementById('todo-input');
const todoList = document.getElementById('todo-list');


todoForm.addEventListener('submit', function(event) {
    event.preventDefault(); 
    const newTodoText = todoInput.value.trim();


    if (newTodoText !== '') {
        addTodoItem(newTodoText);
        todoInput.value = ''; 
    }
});
function addTodoItem(text) {
    
    const li = document.createElement('li');
    li.textContent = text;
    

    const deleteBtn = document.createElement('button');
    deleteBtn.textContent = '删除';
    deleteBtn.onclick = function() {
        li.remove();
    };
    li.appendChild(deleteBtn);


    todoList.appendChild(li);
}
function saveTodos() {
    const todos = [];
    document.querySelectorAll('#todo-list li').forEach(function(item) {
        todos.push(item.textContent.replace('删除', '').trim());
    });
    localStorage.setItem('todos', JSON.stringify(todos));
}

function loadTodos() {
    const todos = JSON.parse(localStorage.getItem('todos')) || [];
    todos.forEach(addTodoItem);
}


document.addEventListener('DOMContentLoaded', loadTodos);



 </script>
    
</body>
</html>
